// stylelint-disable declaration-no-important

// Margin and Padding

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @each $prop, $abbrev in (margin: m, padding: p) {
      @each $size, $length in $spacers {
        .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
        .#{$abbrev}t#{$infix}-#{$size},
        .#{$abbrev}y#{$infix}-#{$size} {
          #{$prop}-top: $length !important;
        }
        .#{$abbrev}r#{$infix}-#{$size},
        .#{$abbrev}x#{$infix}-#{$size} {
          #{$prop}-right: $length !important;
        }
        .#{$abbrev}b#{$infix}-#{$size},
        .#{$abbrev}y#{$infix}-#{$size} {
          #{$prop}-bottom: $length !important;
        }
        .#{$abbrev}l#{$infix}-#{$size},
        .#{$abbrev}x#{$infix}-#{$size} {
          #{$prop}-left: $length !important;
        }
      }
    }

    // Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`)
    @each $size, $length in $spacers {
      @if $size != 0 {
        .m#{$infix}-n#{$size} { margin: -$length !important; }
        .mt#{$infix}-n#{$size},
        .my#{$infix}-n#{$size} {
          margin-top: -$length !important;
        }
        .mr#{$infix}-n#{$size},
        .mx#{$infix}-n#{$size} {
          margin-right: -$length !important;
        }
        .mb#{$infix}-n#{$size},
        .my#{$infix}-n#{$size} {
          margin-bottom: -$length !important;
        }
        .ml#{$infix}-n#{$size},
        .mx#{$infix}-n#{$size} {
          margin-left: -$length !important;
        }
      }
    }

    // Some special margin utils
    .m#{$infix}-auto { margin: auto !important; }
    .mt#{$infix}-auto,
    .my#{$infix}-auto {
      margin-top: auto !important;
    }
    .mr#{$infix}-auto,
    .mx#{$infix}-auto {
      margin-right: auto !important;
    }
    .mb#{$infix}-auto,
    .my#{$infix}-auto {
      margin-bottom: auto !important;
    }
    .ml#{$infix}-auto,
    .mx#{$infix}-auto {
      margin-left: auto !important;
    }
  }
}

  
    /**
     * @Description: spacing extension
      * @author Xu Xiao dong
     * @date 2019/3/3
    */

@mixin ml($num){
  margin-left: $num
}
@mixin mr($num){
  margin-right: $num
}
@mixin mt($num){
  margin-top: $num
}
@mixin mb($num){
  margin-bottom: $num
}
@mixin padding($tb,$lr){
  @if $lr{
    padding:  $tb $lr;
  }@else{
    padding: $tb;
  }
}
%ml-5{
  @include ml(5px);
}
%ml-16{
  @include ml(16px);
}
%mr-16{
  @include mr(16px);
}
%mtb-16{
  @include mt(16px);
  @include mb(16px);
}
%mt-16{
  @include mt(16px);
}
%pd-16{
  @include padding(16px,false);

}
%pd-24{
  @include padding(24px, false);
}
%pd-lr-10{
  @include padding(0,10px )
}
%pd-lr-1rem{
  @include padding(0.75rem,1rem )
}
%pd-3-5{
  @include padding(3px,5px );
}
%pd-5-10{
  @include padding(5px,10px );
}
%pd-5{
  @include padding(5px,false);
}
%pd-10{
  @include padding(10px,10px);
}
%no-padding{
  @include padding(0,false);
}
  .margin-top-16px{
    @extend %mt-16
  }
  .ml-5px{
    @extend %ml-5
  }
  .ml-16px{
    @extend %ml-16
  }
  .mr-16px{
    @extend %mr-16
  }
  .mt-16px{
    @extend %mt-16
  }
  .mtb-16px{
    @extend %mtb-16
  }
  .pd-3-5px{
    @extend %pd-3-5
  }
  .pd-5px{
    @extend %pd-3-5
  }

  .pd-lr10px{
    @extend %pd-lr-10
  }
  .pd-lr-1rem{
    @extend %pd-lr-1rem
  }
  .pd-5-10px{
    @extend %pd-5-10
  }
  .pd-10px{
    @extend %pd-10
  }
  .pd-16px{
    @extend %pd-16
  }
  .pd-24px{
    @extend %pd-24
  }
  .no-padding{
    @extend %no-padding
  }
  .sm-mt-10px{
    @include media-breakpoint-down("sm", $grid-breakpoints) {
       @include mt(10px)
    }
  }
  